<template>
  <div style="display: flex;padding-left: 2px;">
    <div style="height:calc(100vh - 100px); overflow: auto;">
      <div  style="width: 80px;background-color:#fff;height:calc(100vh - 133px); ">
        <div
            style="text-align:center;padding: 12px 0;font-size:14px;"
            :class="[searchModel.goodCatId===null?'active':'']"
            @click="choseCat(null)">
          <div class="line">
            全部
          </div>
        </div>
        <div
            style="text-align:center;padding: 12px 0;font-size:14px;"
            :class="[searchModel.goodCatId===item.id?'active':'']"
            v-for="(item,index) in catList" :key="index" @click="choseCat(item.id)"
        >
          <div class="line">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>

    <div  style="flex:1;padding-right: 5px;overflow: auto;height: calc(100vh - 100px);">
      <fresh-load ref="freshRef" @action="action" url="app/getGoodListWithKc" :searchModel="searchModel">
        <div class="item" v-for="(item,index) in list" :key="index" >
          <div class="name">{{ item.name }}</div>
          <div class="link">
            <div>规格：1 * {{ item.spec }}</div>
          </div>
          <div style="display: flex;">
            <div class="address" style="flex:1;">单位：{{ item.unit1 }}</div>
            <div style="color: #c45656;">
              <span >{{ item.lastCount }}</span>
            </div>
          </div>
        </div>
      </fresh-load>
    </div>

  </div>
</template>
<script setup>
import tool from "@/utils/tool";
import FreshLoad from "@/components/freshLoad.vue";
import {onBeforeMount, reactive, ref} from "vue";
const props = defineProps({
  buId: {type: [Number, String], default: 0},
  buName: {type: [Number, String], default: ''},
})
const active = ref(0)
const list = ref([])
const catList = ref([])
const searchModel = reactive({
  keyWord: '',
  goodCatId: null,
  buId: props.buId
})
const freshRef = ref(null)
onBeforeMount(() => {
  getGoodCat()
})
const choseCat = (id) => {
  searchModel.goodCatId = id
  getList()
}
const getGoodCat = () => {
  tool.post('app/getGoodCat').then(ret => {
    if(ret.stat) {
      catList.value = ret.data
    }
  })
}
const scanRet = (code) => {
  if(code) {
    active.value = 0
    searchModel.goodCatId.value = null
    tool.post('app/getGoodByBar', {code: code}, true).then(ret => {
      list.value = []
      list.value = ret.data.list
    })
  }
}
const search = (value) => {
  active.value = 0
  searchModel.goodCatId = null
  searchModel.keyWord = value
  getList()
}
const getList = () => {
  freshRef.value.getList()
}
const action = (arr) => {
  list.value = arr
}

defineExpose({search})
</script>
<style scoped lang="scss">
.active {
  background-color:rgba(0,0,0,0.05);
  .line {
    border-left:3px solid red;
  }
}

.item {
  margin:7px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  .name {
    font-size: 15px;
    font-weight: 500;
    color: #6b6d71;
  }
  .link {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
    display: flex;
  }
  .address {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
  }
}


</style>